 <template>
   <!-- 更换法人手机号 -->
   <view class="legalPersonphone">
     <view class="content">
       <view class="content-item">
         <u-form :model="form" ref="form" label-width="280" labelPosition="’top‘" :error-type="errorType">
           <block v-if="numRecord == 0">
             <u-form-item label="原手机号码" borderBottom>
               <u--input type="number" :maxlength="11" v-model="form.mobile" border="none" readonly></u--input>
             </u-form-item>
             <u-form-item borderBottom>
               <view class="codeForm">
                 <u--input v-model="form.mobileCode" placeholder="填写验证码" :maxlength="6" border="none"></u--input>

                 <u-code :startText="'获取验证码'" :endText="'获取验证码'" ref="uCode" @change="codeChange"></u-code>
                 <button class="lookbtn code-btn" @tap="getCode">
                   {{ tips }}
                 </button>
               </view>
             </u-form-item>
           </block>
           <block v-else>
             <u-form-item label="新手机号码" borderBottom>
               <u--input type="number" :maxlength="11" v-model="form.mobileNew" border="none"></u--input>
             </u-form-item>
             <u-form-item borderBottom>
               <view class="codeForm">
                 <u--input v-model="form.mobileCodeNew" placeholder="填写验证码" :maxlength="6" border="none"></u--input>

                 <u-code :startText="'获取验证码'" :endText="'获取验证码'" ref="uCode" @change="codeChange"></u-code>
                 <button class="lookbtn code-btn" @tap="getCodeNew">
                   {{ tips }}
                 </button>
               </view>
             </u-form-item>
           </block>
         </u-form>
       </view>
     </view>

     <view class="btns">
       <button v-if="numRecord == 0" class="submit-btn" type="primary" style="width: 100%" @click="nextHandle">
         下一步
       </button>
       <button v-else class="submit-btn" type="primary" @click="submitHandle" style="width: 100%">
         确认
       </button>
     </view>
   </view>
 </template>

 <script>
   import {
     legalAuthenticate,
     messageSendsms,
     checkLegalInfo,
   } from "@/api/myself.js";
   import {
     Toast,
     navBack
   } from "@/utils/util.js";

   export default {
     name: "legalPersonphone",
     data() {
       return {
         baseImgUrl: this.$baseImgUrl,
         form: {},
         options: {},
         errorType: ["none"],
         tips: "",
         oldLegalKey: "", // 原法人手机验证通过key
         numRecord: 0,
       };
     },
     onLoad(options) {
       this.options = JSON.parse(decodeURIComponent(options.data));
       this.form.mobile = this.options.mobile;
     },
     methods: {
       codeChange(text) {
         this.tips = text;
       },
       // 原手机号码  请求验证码
       getCode() {
         if (this.$refs.uCode.canGetCode) {
           // 模拟向后端请求验证码
           uni.showLoading({
             title: "正在获取验证码",
           });
           setTimeout(() => {
             uni.hideLoading();
             // 这里此提示会被this.start()方法中的提示覆盖
             uni.$u.toast("验证码已发送");
             // 通知验证码组件内部开始倒计时
             this.$refs.uCode.start();

             let data = {
               companyId: this.options.id,
               mobile: this.options.mobile,
               smsType: "UPDATE_OLD_LEGAL_MOBILE",
             };

             messageSendsms(data).then((res) => {
               if (res.code != 200) {
                 Toast(res.message);
               }
             });
           }, 2000);
         }
       },
       getCodeNew() {
         if (this.$refs.uCode.canGetCode) {
           // 模拟向后端请求验证码
           uni.showLoading({
             title: "正在获取验证码",
           });
           setTimeout(() => {
             uni.hideLoading();
             // 这里此提示会被this.start()方法中的提示覆盖
             uni.$u.toast("验证码已发送");
             // 通知验证码组件内部开始倒计时
             this.$refs.uCode.start();

             let data = {
               companyId: this.options.id,
               mobile: this.form.mobileNew,
               smsType: "UPDATE_NEW_LEGAL_MOBILE",
             };

             messageSendsms(data).then((res) => {
               if (res.code != 200) {
                 Toast(res.message);
               }
             });
           }, 2000);
         }
       },
       nextHandle() {
         if (!this.form.mobileCode) {
           Toast("请输入验证码");
           return false;
         }

         legalAuthenticate({
           id: this.options.id,
           mobileCode: this.form.mobileCode,
         }).then((res) => {
           if (res.code == 200) {
             this.oldLegalKey = res.result.authenticate;
             this.numRecord = 1;
           } else if (res.code == 400) {
             Toast(res.message);
           }
         });
       },
       submitHandle() {
         let {
           mobileNew,
           mobileCodeNew
         } = this.form;
         if (!mobileNew) {
           Toast("请输入新手机号码");
           return;
         }

         if (mobileNew && !this.$u.test.mobile(mobileNew)) {
           Toast("请输入正确的手机号");
           return;
         }

         if (!mobileCodeNew) {
           Toast("请输入验证码");
           return;
         }

         checkLegalInfo({
           id: this.options.id,
           oldLegalKey: this.oldLegalKey,
           mobileCode: mobileCodeNew,
           mobile: mobileNew,
         }).then((res) => {
           if (res.code == 200) {
             uni.$emit("mobileNew", mobileNew);
             navBack();
           } else if (res.code == 400) {
             Toast(res.message);
           }
         });
       },
     },
   };
 </script>

 <style lang="scss">
   .legalPersonphone {
     flex: 1;
     background-color: #f9f9f9;

     .content {
       margin: 0 auto;
       margin-top: 20rpx;
       margin-bottom: 20rpx;
       border-radius: 8rpx;
       width: calc(100% - 35rpx);
       height: calc(100vh - 84px);
       overflow-y: auto;

       .content-item {
         padding: 25rpx;
         background: #fff;

         .code-btn {
           color: #2488f5;
           font-size: 28rpx;
         }

         .codeForm {
           display: flex;
           justify-content: space-around;
         }
       }
     }
   }
 </style>